<template>
  <el-container>
    <el-header style="height: auto">
      <router-view name="helper"></router-view>
      <el-menu
          :default-active="'/static/code'"
          router
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <template v-for="item in navList">
          <el-submenu v-if="item.child.length" :index="item.path" :key="item.key">
            <template slot="title">
              {{ item.title }}
            </template>
            <el-menu-item
                v-for="(child, key) in item.child"
                :key="key"
                :index="child.path"
            >
              {{ child.title }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="item.path" :key="item.key">
            {{ item.title }}
          </el-menu-item>
        </template>
        <div class="el-menu-item" style="float: right; background-color: rgb(84, 92, 100);" @click="clicks">
            <img
                id="img1"
                style="object-fit:cover"
                :src="HomeImg"
            />
        </div>
      </el-menu>
    </el-header>
    <el-main style="height: auto">
      <router-view></router-view>
    </el-main>
    <el-footer style="height: auto; background-color: rgb(84, 92, 100);">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple" style="width:300px;margin:0 auto; padding:20px 0;">
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42092202000061"
               style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
              <img src="http://www.ai-god.com:8081/static/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
                   style="float:left;"/>
              <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备
                42092202000061号
              </p>
            </a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="width:300px;margin:0 auto; padding:20px 0;">
            <a href="https://beian.miit.gov.cn/" target="_blank">
              <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
                鄂ICP备2022002190号-1
              </p>
            </a>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "StaticMenu",
  data() {
    return {
      navList: [
        {path: '/static/code', title: '码库', key: "1", child: []},
        {
          path: '', title: '乐库', key: "2"
          , child: [
            {path: '/static/music', title: '乐库1', key: "2-1"},
            {path: '/static/music', title: '乐库2', key: "2-2"},
            {path: '/static/music', title: '乐库3', key: "2-3"}
          ]
        },
        {path: '/static/photos', title: '图库', key: "3", child: []},
        {path: '/static/writing', title: '文库', key: "4", child: []},
        {path: '/static/movie', title: '影库', key: "5", child: []},
        {path: '/static/exhibition', title: '展房', key: "6", child: []},
      ],
      HomeImg: 'http://www.ai-god.com:8081/static/Thumbnail/3.jpg'
    }
  },
  methods: {
    clicks(){
      if (this.$route.path === "/static/home") {
        let wPath = window.document.location.href;
        let pathName =  this.$route.path;
        let pos = wPath.indexOf(pathName);
        window.location.href = wPath.substring(0, pos) + "/star";
      } else {
        this.$router.push('home')
      }
    }
  }
}
</script>

<style scoped>
#img1 {
  width: 40px;
  height: 40px;
  border-radius: 140px;
  -webkit-animation: run 6s linear 0s infinite;
}

#img1:hover {
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes run {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.el-header {
  padding: 0;
}

</style>